{include file="public/header" /}
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>可拖拽的路线规划</title>
    <style>
        html,
        body{
            width: 100%;
            height: 100%;
        }
        #container{
            float:left;
            width:70%;
            height: 100%;
        } 
        #lines{
            float: left;
            width:25%;
            height: 100%;
            padding:0 2.5%;
            overflow-y: scroll;
        }
    </style>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: '775b21664ea3f9505e22fc3e7f81e416',
        }
    </script>
    <script src="https://webapi.amap.com/maps?v=2.0&key=e39f8da70435148bc68377fe912b6e2a"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>

<body>
    <div class="layui-card-body layui-card">
        <form class="layui-form layui-form-pane form-search">
            <input type="hidden" name="id" value="{:input('get.id')}" >
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">日期</label>
                        <div class="layui-input-inline">
                            <input id="dates" type="text" name="title" placeholder="时间" value="{:input('get.title')}"
                                        autocomplete="off" class="layui-input">
                        </div>
                </div>
             <div class="layui-form-item layui-inline">
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="sreach">搜索</button>
            </div>
        </form>
    </div>
    <div id="container"></div>
    <div id="lines">
    <ul class="layui-timeline">
        {foreach $miaoshu as $v}
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">{$v.time}</h3>
      <p>
        {$v.text}
      </p>
    </div>
  </li>
  
  {/foreach}
    </div>
{include file="public/footer"}
    <script type="text/javascript">
    layui.use(['layer','laydate'], function() {
    var layer = layui.layer,
        $ = layui.jquery,
        laydate = layui.laydate;
        laydate.render({
  elem: '#dates' //指定元素
});
    });
    </script>
    <script type="text/javascript">
        var map, route, marker;
        //基本地图加载
        map = new AMap.Map("container", {
            resizeEnable: true
        });
        //绘制初始路径
        var path = <?= json_encode($getlats, true) ?>;
        console.log(path);
        map.plugin("AMap.DragRoute", function () {
            route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_TIME); //构造拖拽导航类
            route.search(); //查询导航路径并开启拖拽导航
        });
    </script>
</body>

</html>